<template>
  <div class="fullSize" id="cesiumContainer"></div>
</template>

<script>
import { DownOutlined, EditOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
import MousePosition from '../utils/mousePosition.js';
import PolylineTrailMaterialProperty from './flyLine.js';
import flyLineData from './data';

export default {
  name: 'CesiumDynamicLine1',
  data() {
    return {
      viewer: null
    };
  },

  mounted() {
    const factory = new CesiumFactory();

    this.viewer = factory.getViewer();

    this.create();
  },

  methods: {
    create() {
      //创建射线
      this.createFlyLines(flyLineData);
    },

    createFlyLines(data) {
      const center = data.center;

      const cities = data.points;

      const startPoint = Cesium.Cartesian3.fromDegrees(
        center.lon,

        center.lat,

        0
      );

      //中心点

      this.viewer.entities.add({
        position: startPoint,

        point: {
          pixelSize: center.size,

          color: center.color
        }
      });

      //大批量操作时，临时禁用事件可以提高性能

      this.viewer.entities.suspendEvents();

      //散点

      cities.map(city => {
        let material = new Cesium.PolylineTrailMaterialProperty({
          color: Cesium.Color.GREEN,

          duration: 3000,

          trailImage: 'images/colors1.png'
        });

        const endPoint = Cesium.Cartesian3.fromDegrees(city.lon, city.lat, 0);

        this.viewer.entities.add({
          position: endPoint,

          point: {
            pixelSize: city.size - 10,

            color: city.color
          }
        });

        this.viewer.entities.add({
          polyline: {
            positions: this.generateCurve(startPoint, endPoint),

            width: 2,

            material: material
          }
        });
      });

      this.viewer.entities.resumeEvents();

      this.viewer.flyTo(this.viewer.entities);
    },

    /**
    * 生成流动曲线
    * @param startPoint 起点
    * @param endPoint 终点
    * @returns {Array}
    */
    generateCurve(startPoint, endPoint) {
      let addPointCartesian = new Cesium.Cartesian3();

      Cesium.Cartesian3.add(startPoint, endPoint, addPointCartesian);

      let midPointCartesian = new Cesium.Cartesian3();

      Cesium.Cartesian3.divideByScalar(addPointCartesian, 2, midPointCartesian);

      let midPointCartographic = Cesium.Cartographic.fromCartesian(midPointCartesian);

      midPointCartographic.height = Cesium.Cartesian3.distance(startPoint, endPoint) / 5;

      let midPoint = new Cesium.Cartesian3();

      Cesium.Ellipsoid.WGS84.cartographicToCartesian(
        midPointCartographic,

        midPoint
      );

      let spline = new Cesium.CatmullRomSpline({
        times: [0.0, 0.5, 1.0],
        points: [startPoint, midPoint, endPoint]
      });

      let curvePoints = [];
      for (let i = 0, len = 200; i < len; i++) {
        curvePoints.push(spline.evaluate(i / len));
      }

      return curvePoints;
    }
  }
};
</script>

<style lang="scss"></style>
